<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">

        <div class="layui-form-item">
            <label class="layui-form-label">门店名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入门店名称" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属商家</label>
            <div class="layui-input-block">
                <select name="manager_id" lay-verify="required" data-select="{:url('mall.manager/index')}" data-fields="id,title" data-value="{$ids}">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系人</label>
            <div class="layui-input-block">
                <input type="text" name="realname" lay-verify="required"  class="layui-input" placeholder="请输入联系人" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" lay-verify="required"  class="layui-input" placeholder="请输入联系电话" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">营业时间</label>
            <div class="layui-input-block">
                <input type="text" name="opentime" lay-verify="required"  class="layui-input" placeholder="请输入营业时间" value="">
            </div>
        </div>
        <div class="layui-form-item" id="area-picker">
            <label class="layui-form-label">所在区域</label>
            <div class="layui-input-block" style="display: flex;">
                <div class="layui-input-inline">
                    <select name="province" class="province-selector" lay-verify="required" id="province" data-value="" lay-filter="province-1">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" class="city-selector" lay-verify="required" data-value="" lay-filter="city-1">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="county" class="county-selector" lay-verify="required" data-value="" lay-filter="county-1">
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门店地址</label>
            <div class="layui-input-block" id="address">
                <input type="hidden" id="addressstr" name="latlng">
                <input type="hidden" id="namestr" name="location">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">门牌号</label>
            <div class="layui-input-block">
                <input type="text" name="store_no" lay-verify="required"  class="layui-input" placeholder="请输入门牌号" value="">
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>
    </form>
</div>
<script>
    layui.config({
        base: '__STATIC__/',
        version: '1.0'
    });
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                //选择结果
                console.log(res);
                var demo1 = xmSelect.render({
                    el: '#address',
                    on: function (data) {
                        var arr = data.arr;
                        if (arr.length > 0) {
                            for (let i = 0; i < arr.length; i++) {
                                $("#addressstr").val(arr[i].value);
                                $("#namestr").val(arr[i].name);
                            }
                        }
                    },
                    radio: true,
                    autoRow: true,
                    toolbar: { show: true },
                    filterable: true,
                    remoteSearch: true,
                    remoteMethod: function(val, cb, show){
                        val =res.county+''+val;
                        $.ajax({
                            type: "GET",
                            url: "/admin/mall.door/getRegionSearchResult",
                            data: {keyword: val},
                            dataType: "json",
                            success: function (data) {
                                console.log(data);
                                cb(data.data.location);
                            }
                        })
                    }
                })
            }
        });
    });
</script>